<template>
  <el-tag v-for="(item, index) in arr"
          :disable-transitions="true"
          :key="item.key"
          :index="index"
          :type="item.elTagType"
          :class="item.elTagClass"
          :style="item.elTagStyle"
          hit
          style="margin: 0 2px;"
          effect="light">{{ item.value }}
  </el-tag>
</template>

<script setup>
import {computed} from "vue";
import {isNullOrUndefined} from "@/config/common";

const props = defineProps({
  enumList: {
    type: Array,
    required: true,
    default: null,
  },
  enumKey: {
    type: [String, Array, Number],
    default: null,
  },
})

const arr = computed(() => {
  if (isNullOrUndefined(props.enumKey)) {
    return []
  }
  const keys = props.enumKey.toString()
  const enumKeyArr = keys.split(',')
  return props.enumList.filter(item => enumKeyArr.includes(item.key.toString())).map(item => {
    item.elTagType = isNullOrUndefined(item.elTagType) ? 'info' : (item.elTagType === 'primary' ? '' : item.elTagType);
    return item;
  })
})
</script>
